import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class IndicatorPage extends PageWithTitle {
  const IndicatorPage({super.key})
      : super("进度条(LinearProgressIndicator、CircularProgressIndicator)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("常用于展示任务执行进度，与Android原生ProgressBar类似，Flutter也提供了长"
          "条形与圆形两种进度条组件"),
      AppSpacer.large,
      _LinearExample(),
      UlItem("LinearProgressIndicator"),
      BodyText("进度条组件，适合大多数需要清晰表示任务进度的场景，比如文件下载"),
      PrimaryHeaderLabelText(
        "value",
        "进度值[0,1]，若设置为空表示模糊状态，进度条将循环执行动画",
      ),
      PrimaryHeaderLabelText(
          "backgroundColor",
          "进度条背景色>",
          "主题配置progressIndicatorTheme.linearTrackColor>",
          "默认colorScheme.surface"),
      PrimaryHeaderLabelText("color", "进度条颜色>",
          "主题配置progressIndicatorTheme.color>", "默认colorScheme.primary"),
      PrimaryHeaderLabelText(
          "valueColor",
          "动画颜色，在value为null时进度条执行循环动画，这个动画颜色"
              "可以在两个颜色之间循环转换显示"),
      PrimaryHeaderLabelText("minHeight", "进度条高度"),
      PrimaryHeaderLabelText("borderRadius", "边框圆角"),
      AppSpacer.large,
      _CircularExample(),
      UlItem("CircularProgressIndicator"),
      BodyText("圆环进度条，参数与普通进度条差不多，ui上体现为圆环形，适合在宽度有限或loading"
          "的场景使用"),
      PrimaryHeaderLabelText("backgroundColor", "组件背景色>",
          "主题配置progressIndicatorTheme.circularTrackColor"),
      PrimaryHeaderLabelText("strokeWidth", "圆环宽度"),
      PrimaryHeaderLabelText(
          "strokeAlign",
          "对齐效果，0表示画笔以圆环内外圆中间位置绘制，有一半会超出容"
              "器，-1则表示以圆环内圆为半径进行绘制，1表示以圆环外圆为半径"),
      PrimaryHeaderLabelText(
          "strokeCap",
          "笔触，可以设置画笔笔尖为圆形、方形等，主要影响绘制的结束位置形"
              "状"),
    ];
  }
}

class _LinearExample extends StatefulWidget {
  const _LinearExample();

  @override
  State<StatefulWidget> createState() {
    return _LinearExampleState();
  }
}

class _LinearExampleState extends State<_LinearExample>
    with SingleTickerProviderStateMixin {
  late AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(vsync: this)
      ..duration = const Duration(milliseconds: 2000)
      ..repeat();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return LinearProgressIndicator(
      // value: 0.9,
      backgroundColor:
          Theme.of(context).progressIndicatorTheme.linearTrackColor ??
              Theme.of(context).colorScheme.surface,
      // color: Theme.of(context).colorScheme.primary,
      valueColor: ColorTween(
              begin: const Color(0xff00ff00), end: const Color(0xff0000ff))
          .animate(animationController),
      minHeight: 15,
      borderRadius: const BorderRadius.all(Radius.circular(7.5)),
    );
  }
}

class _CircularExample extends StatefulWidget {
  const _CircularExample();

  @override
  State<StatefulWidget> createState() {
    return _CircularExampleState();
  }
}

class _CircularExampleState extends State<_CircularExample>
    with SingleTickerProviderStateMixin {
  late AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(vsync: this)
      ..duration = const Duration(milliseconds: 2000)
      ..repeat();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 80,
        height: 80,
        child: CircularProgressIndicator(
          // value: 0.9,
          backgroundColor:
              Theme.of(context).progressIndicatorTheme.circularTrackColor ??
                  Theme.of(context).colorScheme.surface,
          // color: Theme.of(context).colorScheme.primary,
          valueColor: ColorTween(
                  begin: const Color(0xff00ff00), end: const Color(0xff0000ff))
              .animate(animationController),
          strokeWidth: 15,
          strokeAlign: -1,
          strokeCap: StrokeCap.round,
        ),
      ),
    );
  }
}
